<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6" style="height: 400px;">
                <div class="cikbooy">
                    <div class="cikfill" v-show="item.label!==''" v-for="(item,index) in LData" :key="index" @dblclick="cikfill(item)">{{ item.label }}</div>
                </div>
            </el-col>
            <el-col :span="18">
                <div style="height: 400px;">
                    <vxe-table
                        border
                        resizable
                        show-overflow
                        keep-source
                        size="mini"
                        ref="xTable"
                        height="100%"
                        :loading="false"
                        :data="RData"
                        :edit-config="{trigger: 'click', mode: 'row'}"
                    >
                      <vxe-column type="checkbox" width="60"></vxe-column>
                      <vxe-column field="title" title="字段"></vxe-column>
                      <vxe-column field="v" title="填充字段" :edit-render="{}">
                        <template #default="{ row }">
                          <span>{{ row.v }}</span>
                        </template>
                        <template #edit="{ row }">
                          <vxe-select v-model="row.v" type="text" :options="LData" transfer></vxe-select>
                        </template>
                      </vxe-column>
                    </vxe-table>
                </div>
            </el-col>
        </el-row>
        <div class="fillb-bou">
            <div>提示：双击左侧节点快速填充提取字段</div>
            <div>
              <el-button size="small" @click="submit(true)">确定</el-button>
              <el-button size="small" @click="submit(false)">取消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {ref} from "vue"
import XEUtils from 'xe-utils'
export default {
    props: ['LData', 'RData'],
    emits:["submit"],
    setup(props,ctx) {
        let xTable = ref(null)
        const submit=(mark)=> {
            console.log(xTable.value.getTableData(),"lllll");
            let data = {}
            xTable.value.getTableData().fullData.forEach(row => {
                if (row.v !== '') {
                data[row.name] = { v: row.v, t: row.t }
                }
            })
            console.log({ data, update: mark });
            ctx.emit('submit', { data, update: mark })
        }
        const cikfill=(item) =>{
            let v = true
            xTable.value.reloadData(props.RData.map((row, index) => {
                if (row.t === '' && v) {
                row.t = row.v = item.value
                v = false
                }
                return row
            }))
        }
        return{
            xTable,
            submit,
            cikfill
        }
    }
    
}
</script>

<style scoped>
    .cikbooy{
        height: 100%;
        border: 1px solid #d2d2d2;
    }
.cikfill {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.771);
        line-height: 20px;
        padding: 5px;
        border-bottom: 1px solid #d2d2d2;
        cursor: pointer;
      }
      .fillb-bou {
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
  }
  .fillb-bou>div {
      font-size: 14px;
    }
</style>